<template>
	<view>
		<view class="imgAndVBox">
			<view class="positionQh flex" v-if="shopDetali.video">
				<view class="w-120 textC h-50 lh-50" @click="lookType='img'" :class="lookType=='img'?'active':''">图片
				</view>
				<view class="w-120 textC h-50 lh-50" @click="lookType='vio'" :class="lookType=='vio'?'active':''">视频
				</view>
			</view>
			<block v-if="lookType=='img'">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,i) in imgReturn(shopDetali.images)">
						<image :src="$util.img(item)" mode=""></image>
					</swiper-item>
				</swiper>
			</block>
			<block v-if="lookType=='vio'">
				<video :src="$util.img(shopDetali.video)"></video>
			</block>
		</view>

		<!-- 第一模块 -->
		<view class="modelBox">
			<view class="flex_b">
				<view class="">
					<view class="font-36 font-weight w-600">{{shopDetali.shop_name||'未命名'}}</view>
					<view class="flex m-t-14">
						<view v-for="(item,index) in labelReturn(shopDetali.label)" :key="index"
							class="font-20 biaoqian">{{item}}</view>
					</view>
				</view>
				<view class="flex_c textC m-r-16" @click="collectionFn" v-if="type!='anLi'&&type!='cangku'">
					<view v-if="scData==1" class="iconfont icon-shoucang1 f-t" style="font-size: 32rpx;"></view>
					<view v-else class="iconfont icon-shoucang" style="font-size: 32rpx;"></view>
					<view class="">收藏</view>
				</view>
			</view>



			<view class="flex_b m-t-18">
				<view class="" style="width: 33%;">
					<view class="textC font-36 f-t font-weight">{{shopDetali.area||0}}m²</view>
					<view class="textC font-24 grey">面积</view>
				</view>
				<view class="" style="width: 33%;">
					<view class="textC font-36 f-t font-weight">{{shopDetali.month_rent||0}}元/月</view>
					<view class="textC font-24 grey">月租</view>
				</view>
				<view class="" style="width: 33%;">
					<view class="textC font-36 f-t font-weight">{{shopDetali.city||''}}{{shopDetali.district||''}}
					</view>
					<view class="textC font-24 grey">{{shopDetali.address}}</view>
					<!-- {{shopDetali.address||'未设置'}} -->
				</view>
			</view>
		</view>

		<view class="modelBox">
			<view class="flex m-b-14">
				<view class="font-28 grey w-136">地区</view>
				<view class="font-28">{{shopDetali.city||''}}{{shopDetali.district||''}}</view>
			</view>
			<view class="flex m-b-14">
				<view class="font-28 grey w-136">经营行业</view>
				<view class="font-28">{{shopDetali.industry_text||''}}</view>
			</view>
			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">租金</view>
					<view class="font-28">{{shopDetali.month_rent||0}}元/月</view>
				</view>
				<view class="flex">
					<view class="font-28 grey w-136">转让费</view>
					<view class="font-28">{{shopDetali.transfer_fee||''}}</view>
				</view>
			</view>

			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">经营状态</view>
					<view class="font-28">{{shopDetali.status_text||''}}</view>
				</view>
				<!-- 			<view class="flex">
					<view class="font-28 grey w-136">剩余租期</view>
					<view class="font-28">6个月</view>
				</view> -->
			</view>

			<view class="flex m-b-14">
				<view class="flex" style="width: 50%;">
					<view class="font-28 grey w-136">付款方式</view>
					<view class="font-28">{{shopDetali.pay_type||'面议'}}</view>
				</view>
				<view class="flex">
					<view class="font-28 grey w-136">楼层</view>
					<view class="font-28">{{shopDetali.floor||''}}楼</view>
				</view>
			</view>

			<view class="flex m-b-14">
				<view class="font-28 grey w-136">面积</view>
				<view class="font-28">{{shopDetali.area||0}}m²</view>
			</view>

			<view class="flex">
				<view class="font-28 grey w-136">详细地址</view>
				<view class="font-28">{{shopDetali.address||0}}</view>
			</view>

			<view class="font-34 font-weight m-t-28">配套设施</view>
			<view class="sheshiList">
				<view v-for="(item,index) in shopDetali.facility_text" :key="index" class="sheshiItem">
					<image :src="$util.img(item.image)" mode=""></image>
					<view class="font-24">{{item.name}}</view>
				</view>
			</view>
		</view>

		<view class="modelBox">
			<view class="font-34 font-weight ">店铺详情</view>
			<uv-read-more show-height="150rpx" :toggle="true" ref="readMore">
				<rich-text :nodes="formatImg(dateText)" @ready="ready"></rich-text>
			</uv-read-more>
		</view>

		<view class="modelBox">
			<view class="font-34 font-weight m-b-20">位置及配套设施</view>
			<view class="mapSty">
				<map name="map" @tap="mapDetali" @anchorpointtap="mapDetali" @callouttap="mapDetali" class="mapSty"
					:markers="markers" :latitude="shopDetali.latitude" :longitude="shopDetali.longitude"></map>
			</view>
			<uv-tabs :list="listA" lineColor="rgba(0,0,0,0)" @change="changeZb" :inactiveStyle="{
				width: '108rpx',
				height: '54rpx',
				background: '#f5f5f5',
				borderRadius: '50rpx',
				lineHeight: '54rpx',
				textAlign:'center'
			}" :activeStyle="{
				borderRadius: '50rpx',
				lineHeight: '54rpx',
				textAlign:'center',
				width: '108rpx',
				height: '54rpx',
				color: '#e5632b',
				fontWeight: 'bold',
				background: '#ffebe8',
			}"></uv-tabs>
			<view class="">
				<view v-for="(item,index) in ZhouBianList" :key="index" class="zhoubianItem"
					@click="$util.mapNavigate(item.location.lat,item.location.lng,item.title)">
					<view class="zhoubianA">
						<view class="iconfont icon-weizhi1"></view>
						<view class="zhoubianTit">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-mar" style="height: 100rpx;"></view>
		<!-- 案例详情  -->

		<view class="bomPosition" v-if="type=='anLi'">
			<view class="flex_b">
				<view class="flex_c textC m-r-16 w-100" @click="collectionFn">
					<view class="iconfont icon-shoucang1 f-t" v-if="scData==1" style="font-size: 32rpx;"></view>
					<view class="iconfont icon-shoucang" v-else style="font-size: 32rpx;"></view>
					<view class="">收藏</view>
				</view>
				<button @click="$util.plone(shopDetali.mobile)">电话联系</button>
			</view>
			<view class="h-10"></view>
		</view>
		<!-- 仓库 -->
		<view class="bomPosition" v-else-if="type=='cangku'">
			<view class="flex_b">
				<view class="flex_c textC m-r-16 w-200" @click="collectionFn">
					<view v-if="scData==1" class="iconfont icon-shoucang1 f-t" style="font-size: 32rpx;"></view>
					<view v-else class="iconfont icon-shoucang" style="font-size: 32rpx;"></view>
					<view class="">收藏</view>
				</view>
				<button class="m-r-30" open-type="contact" style="background-color: #f8dcd1;color: #000;">在线咨询</button>
				<button @click="yuYueFn">预约看房</button>
			</view>
			<view class="h-10"></view>
		</view>
		<!-- 普通底部 -->
		<view class="bomPosition " v-else>
			<view class="flex_b">
				<view class="flex">
					<image :src="$util.img(shopDetali.avatar)" v-if="shopDetali.avatar" mode=""
						class="w-64 h-64 bor-32"></image>
					<image src="/static/userNone.png" v-else mode="" class="w-64 h-64 bor-32"></image>
					<view class="m-l-20">
						<view class="font-28">{{shopDetali.realname||'微信用户'}}</view>
						<view class="font-18 grey" v-if="shopDetali.type_text">{{shopDetali.type_text||''}}</view>
					</view>
				</view>
				<view class="flex">
					<view class="flex_c textC m-r-16" @click="yuYueFn">
						<view class="iconfont icon-yuyue f-t" style="font-size: 32rpx;"></view>
						<view class="">约看</view>
					</view>
					<button class="flex_c textC bomBtnR m-r-16" open-type="contact">
						<view class="iconfont icon-a-1 white" style="font-size: 32rpx;"></view>
						<view class="white">在线问</view>
					</button>
					<view class="flex_c textC bomBtnR m-r-16" style="background-color: #e5632b;"
						@click="$util.plone(shopDetali.mobile)">
						<view class="iconfont icon-dianhua white" style="font-size: 32rpx;"></view>
						<view class="white">打电话</view>
					</view>
				</view>
			</view>
			<view class="h-10"></view>
		</view>
		<!-- 预约看房 -->
		<uv-popup ref="popup" round="8" :safeAreaInsetBottom="false" :closeable="true">
			<view class="yuYue flex_c">
				<view class="textC font-32 font-weight">预约看房</view>
				<input type="tel" placeholder="请输入手机号" v-model="value" maxlength="11">
				<button type="primary" @click="submitPlone">提交</button>
			</view>
		</uv-popup>

		<payModel ref="openPay" :shop_earnest_money="shop_earnest_money" :order_no="order_no"></payModel>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop_earnest_money: '',
				value: '',
				show: true,
				id: '',
				scData: 0,
				lookType: 'img',
				shopDetali: {},
				markers: [

				],
				latitude: 39.90,
				longitude: 116.39,
				map: {
					lat: 39.90,
					lng: 116.39
				},
				ZhouBianList: [],
				listA: [{
						name: '交通',
					},
					{
						name: '商场',
					},
					{
						name: '学校'
					},
					{
						name: '医院'
					},
					{
						name: '银行'
					}
				],
				type: '',
				order_no: '',
				dateText: ''
			};
		},
		onLoad(res) {
			if (res.type) {
				this.type = res.type
			}
			if (res.id) {
				this.browse(res.id)
				this.id = res.id
				this.getShopDetali(res.id)
				uni.getStorage({
					key: 'token',
					success: resA => {
						this.iscollection(res.id)
					},fail:err=> {
						console.log(err);
					}
				})

			}
			this.getConfig(res.type)
		},
		ready() {
			// 由于图片较多，可以再适当的给一个延迟
			setTimeout(() => {
				this.$refs.readMore.init();
			}, 1000)
		},
		methods: {
			mapDetali(e) {
				this.$util.mapNavigate(this.shopDetali.latitude, this.shopDetali.longitude, this.shopDetali.address)
			},
			// 记录浏览
			browse(id) {
				this.$api.sendRequest({
					url: '/api/user/browse',
					data: {
						type: '0',
						id: id
					}
				})
			},
			submitPlone() {
				if (!this.value) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					})
					return
				}

				let myDate = new Date()
				let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let myToday = myDate.getDate(); //获取当前日(1-31)
				myMonth = myMonth > 9 ? myMonth : '0' + myMonth
				myToday = myToday > 9 ? myToday : '0' + myToday
				let nowDate = myYear + '-' + myMonth + '-' + myToday

				this.$api.sendRequest({
					url: '/api/shop/subscribe',
					data: {
						shop_id: this.id,
						subscribe_time: nowDate,
						mobile: this.value
					},
					success: res => {
						this.order_no = res.data
						this.$refs.openPay.open()
						this.$refs.popup.close();
					}
				})
			},
			getConfig(type) {
				// "quick_shop_search_price": "1", //快速找店推广金额
				// "quick_change_shop_price": "1", //快速转店推广金额
				// "rental_shop_price": "1", //商铺出租推广金额
				// "transfer_shop_price": "1", //商铺转让推广金额
				// "factory_warehouse_price": "1", //厂房仓库推广金额
				// "siting_rent_price": "1", //选址求租推广金额
				// shop_earnest_money 看房金额

				this.$api.sendRequest({
					url: '/api/index/config',
					data: {},
					success: res => {
						this.shop_earnest_money = res.data.shop_earnest_money
						this.pay_agreement = res.data.pay_agreement
					}
				})
			},
			// 是否收藏店铺
			iscollection(id) {
				this.$api.sendRequest({
					url: '/api/collection/iscollection',
					data: {
						shop_id: id
					},
					success: res => {
						this.scData = res.data
						this.$forceUpdate()
					}
				})
			},
			collectionFn() {
				// 收藏和取消
				let that = this
				if (this.show) {
					this.show = false
					let url = this.scData == 1 ? '/api/collection/cancelcollection' : '/api/collection/collection'
					this.$api.sendRequest({
						url: url,
						data: {
							shop_id: this.id
						},
						success: res => {
							this.iscollection(this.id)
							setTimeout(() => {
								that.show = true
							}, 100)
						}
					})
				}
			},

			imgReturn(img) {
				if (img) {
					return img.split(',')
				} else {
					return ''
				}
			},
			labelReturn(label) {
				if (label) {
					return label.split(',')
				} else {
					return []
				}
			},
			// 获取商铺详情
			getShopDetali(id) {
				this.$api.sendRequest({
					url: '/api/shop/detail',
					data: {
						id: id
					},
					success: res => {
						this.shopDetali = res.data

						this.getZhouBian('交通')
						this.markers[0] = {
							id: res.data.id,
							latitude: res.data.latitude,
							longitude: res.data.longitude,
							iconPath: '',
							title: res.data.address,
							width: '4rpx',
							height: '2rpx',
							display: 'ALWAYS',
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: res.data.address, //文本
								color: '#000', //文字颜色
								fontSize: 15, //文本大小
								borderRadius: 5, //边框圆角
								padding: '10rpx',
								bgColor: '#ffffff', //背景颜色
								display: 'ALWAYS', //常显
							},
						}

						this.dateText = res.data.detail
						this.$nextTick(() => {
							this.$refs.readMore.init();
						})
					}
				})
			},

			// 预约看房
			yuYueFn() {
				this.$refs.popup.open('center');
			},
			changeZb(e) {
				// 切换周边
				this.type = e.name
				this.getZhouBian(e.name)
			},
			getZhouBian(type) {
				console.log(this.shopDetali, '++--');
				uni.request({
					url: `https://apis.map.qq.com/ws/place/v1/search?key=M6JBZ-2OHKN-B5SFY-S6J2S-X33BE-5DFCI&keyword=${type}&boundary=nearby(${this.shopDetali.latitude},${this.shopDetali.longitude},1000,1)`,
					success: res => {
						this.ZhouBianList = res.data.data
					},
					fail(err) {
						console.log(err, '======');
					}
				})
			},
			formatImg(html) {
				var newContent = html.replace(/<img[^>]*>/gi, (match) => {
					let processed = null;
					if (!match.match(/style=\"(.*)\"/gi)) {
						processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
					} else {
						processed = match.replace(/style=\"(.*)\"/gi,
							'style="width:100%;height:auto;display:block"');
					}
					return processed;
				});
				return newContent;
			},
		}
	}
</script>

<style lang="scss">
	/deep/.uv-read-more__content {
		text-indent: 0 !important;
	}

	.active {
		background-color: #e5632b !important;
		border-radius: 20rpx;
		color: #fff;
	}

	.payBox {
		width: 514rpx;
		height: 370rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 30rpx 25rpx;
	}

	.yuYue {
		width: 514rpx;
		height: 270rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 30rpx 25rpx;

		input {
			width: 476rpx;
			height: 56rpx;
			opacity: 1;
			border-radius: 8rpx;
			background: rgba(241, 244, 248, 1);
			padding: 20rpx;
		}
	}

	.bomBtnR {
		width: 176rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 50rpx;
		background: rgba(59, 196, 140, 1);
	}

	.mapSty {
		width: 100%;
		height: 260rpx;
		border-radius: 50rpx;
	}

	.zhoubianItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25rpx;
		padding: 10rpx 0;
	}

	.zhoubianB {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 30rpx;
		color: #999999;
	}

	.zhoubianTit {
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;
		width: 440rpx;
	}

	.zhoubianA {
		display: flex;
		align-items: center;

		// image {
		// 	width: 34rpx;
		// 	height: 34rpx;
		// 	margin-right: 10rpx;
		// }

		view {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 30rpx;
			color: #333333;
		}
	}

	.sheshiList {
		margin-top: 25rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.sheshiItem {
		width: 20%;
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	page {
		background-color: #f5f6f7;
	}

	.biaoqian {
		background-color: #eef1f4;
		border-radius: 4rpx;
		margin-right: 10rpx;
		padding: 2rpx 6rpx;
		color: #58352b;
	}

	.imgAndVBox {
		width: 750rpx;
		height: 608rpx;
		position: relative;

		.positionQh {
			border-radius: 20rpx;
			z-index: 10;
			width: 240rpx;
			background-color: #eef1f4;
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			margin-left: -120rpx;
		}
	}

	swiper {
		width: 750rpx;
		height: 608rpx;

		swiper-item {
			width: 750rpx;
			height: 608rpx;

			image {
				width: 750rpx;
				height: 608rpx;
			}
		}
	}

	video {
		width: 750rpx;
		height: 608rpx;
	}
</style>